<template>
  <!-- 黑名单 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="queryForm(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item class="marginR20">
            <el-select v-model="listQuery.list_type" filterable clearable placeholder="请选择名单类型">
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in blackListData" :key="index"></el-option>
            </el-select>
            <el-input class="width200" type="text" v-model="listQuery.list_type_value" clearable placeholder="请输入数值"  />
          </el-form-item>
          <el-form-item label="封禁类型:" label-width="90px">
            <el-select v-model="listQuery.ban_type" placeholder="请选择封禁类型" filterable clearable>
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in bannedData" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="addBlackFunc">+黑名单</el-button>
        </template>
        <template>
          <el-table-column align="center" prop="" label="名单类型" width="180">
            <template slot-scope="scope">
              <span >{{ listTypeLabel(scope.row.list_type) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="ban_content" label="黑名单详情" width="180"/>
          <el-table-column align="center" prop="agent_name" label="渠道名"  width="200" show-overflow-tooltip />
          <el-table-column align="center" prop="" label="处罚方式" width="180">
            <template slot-scope="scope">
              <span>{{ banTypeLabel(scope.row.ban_type)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="bet_money" label="总下注">
            <template slot-scope="scope">
              <span>{{ $public.mathNumberDivideWan(scope.row.bet_money)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="game_income" label="总输赢" >
            <template slot-scope="scope">
              <span>{{ $public.mathNumberDivideWan(scope.row.game_income)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="pay_money" label="总充值" >
            <template slot-scope="scope">
              <span>{{ $public.mathNumberDivideWan(scope.row.pay_money)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="cash_money" label="总提款" >
            <template slot-scope="scope">
              <span>{{ $public.mathNumberDivideWan(scope.row.cash_money)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="updated_at" label="操作时间" width="200"/>
          <el-table-column prop="admin_id" label="操作员" align="center" width="150">
            <template slot-scope="scope">
              <span>{{ $public.accountLabel(scope.row.admin_id) }}<span v-show="scope.row.admin_id">【{{scope.row.admin_id}}】</span></span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="reason" label="备注" width="200" show-overflow-tooltip/>
          <el-table-column align="left" fixed="right" prop="operation" label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="''" content="删除" placement="top-start">
                <el-button size="mini" type="danger" @click.stop="delItem(scope.row)" icon="el-icon-delete" />
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
      <!-- 添加黑名单 -->
      <el-dialog :visible.sync="blackDialog"  title="黑名单" width="50%" top="100px">
        <div class="border-box">
          <el-form ref="addRuleForm" :model="addQuery" :rules="addRuleForm" label-width="">
            <form-item title="名单类型" value="list_type">
              <el-select v-model="addQuery.list_type" @change="handleChange">
                <el-option  v-for="(item,index) in blackListData" :key="index+'q'" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </form-item>
            <form-item title="黑名单内容" value="ban_content" :pass="true" >
              <el-input class="width360" type="text" v-model="addQuery.ban_content" />
            </form-item>
            <form-item title="处罚方式" value="ban_type" :pass="true">
              <el-select v-model="addQuery.ban_type" multiple class="width300">
                <el-option :disabled="item.disabled" v-show="item.value > 1" v-for="(item,j) in bannedData" :key="j+'111'" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </form-item>
            <form-item title="备注" value="reason" :pass="true">
              <el-input class="width360" type="text" v-model="addQuery.reason"/>
            </form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="blackDialog = false">取 消</el-button>
          <el-button size="medium" type="primary" @click="handleConfirm('addRuleForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getUserBanList
} from '@/api/risk'
import {
  userBanned
} from '@/api/player'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'

export default {
  name: 'blacklist',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      channelData: this.$store.state.commonState.channelShowDataArray,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 50,
        list_type:'',
        list_type_value:'',
        ban_type:'',
      },
      dataList:[],
      currentTotal: 0,
      blackListData:[
        {label:'IP',value:3},
        {label:'玩家ID',value:1},
        {label:'手机号',value:2},
        {label:'设备号',value:4},
      ],
      bannedData:[
        {label:'正常用户',value:1,type:'success', disabled: true},
        {label:'禁止登录',value:2,type:'info', disabled: false},
        {label:'禁止提现',value:4,type:'danger', disabled: true},
        {label:'禁止彩金',value:8,type:'warning', disabled: true},
      ],
      blackDialog:false, // 黑名单弹框
      addQuery:{ // 新增字段
        list_type:3, // 名单类型
        ban_content:'',// 黑名单内容
        ban_type:[2], // 处罚方式
        reason:'',// 备注
      },
      itemData:[
      { label: '名单类型', key: 'list_type' },
      { label: '黑名单内容', key: 'ban_content' ,pass:true},
      { label: '处罚方式', key: 'ban_type',pass:true},
      { label: '备注', key: 'reason' ,pass:true},
      ],
      addRuleForm:{ // 新增验证
        ban_content:{ required: true, message: '请输入', trigger: 'blur' },
        ban_type:{ required: true, message: '请输入', trigger: 'blur' },
        reason:{ required: true, message: '请输入', trigger: 'blur' },
      }
    }
  },
  created () {
    this.getDataList()
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelShowDataArray
    // this.getDataList()
  },
  methods: {
    // 获取黑名单列表
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = [];
      that.listLoading = true;
      const response = await getUserBanList(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach(item => {
            item.isChecked = false
          })
          that.currentTotal = response.data.total
          that.dataList = response.data.list
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 查询
    queryForm(){
      this.getDataList(true)
    },
    // 封禁类型列表回显/ 处罚方式
    banTypeLabel(val) {
      let arr = []
      this.bannedData.forEach(item => {
        if ((val & item.value) == item.value) {
          arr.push(item.label)
        }
      })
      return arr.toString()
    },
    listTypeLabel(type) {
      let item = this.blackListData.find(item => item.value == type)
      return item.label
    },
    // 新增黑名单
    addBlackFunc() {
      this.addQuery = { // 新增字段
        list_type:3, // 名单类型
        ban_content:'',// 黑名单内容
        ban_type:[2], // 处罚方式
        reason:'',// 备注
      }
      this.blackDialog = true;
    },
    // 名单类型改变之后禁用
    handleChange(val) {
      console.log(val)
      if (val == 3 || val == 4) {
        this.bannedData.forEach((item) => {
          if (item.value == 2) {
            item.disabled = false
          } else {
            item.disabled = true
          }
        })
      } else {
        this.bannedData.forEach((item) => {
          item.disabled = false
        })
      }
      this.addQuery.ban_type = null
    },
    // 确定保存
    handleConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.addQuery)),
          type = query.ban_type.reduce((prev,curr) => {return prev + curr })
          query.ban_type = type
          userBanned(query).then((res) => {
              if (res.code == 1) {
                this.$message({
                  type:'success',
                  message:'操作成功！'
                })
                this.blackDialog = false;
                this.getDataList()
              }
            })
        }
      });
    },
    // 删除 
    delItem(row) {
      let query = {
        "ban_type": 1, 
        "list_type": row.list_type, 
        "ban_content": row.ban_content 
      }
      userBanned(query)
        .then((res) => {
          if (res.code == 1) {
            this.$message({
              type:'success',
              message:'操作成功！'
            })
            this.getDataList()
          }
        })
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        list_type:'',
        list_type_value:'',
        ban_type:'',
      }
      this.getDataList();
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
</style>
